<!DOCTYPE HTML>
<html>

<head>
  <meta charset="utf-8">
  <title>示例复杂购物车</title>
  <link rel="stylesheet" type="text/css" href="../style.css">
</head>

<body>
  <div id="app" v-cloak>
    <template v-if="list.length">
      <table>
        <thead>
          <tr>
            <th></th>
            <th>商品种类</th>
            <th>
              <input type="checkbox" :checked="selectAll" @click="handleSelectAll"> 全选
            </th>
            <th>商品名称</th>
            <th>商品价格</th>
            <th>购买数量</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <template v-for="(item, index) in list" :key="index">
            <template v-for="(item2, index2) in item.data" :key="index2">
              <tr>
                <td>{{ curindex(index, index2) }}</td>
                <td v-if="index2 === 0" :rowspan=" item.data.length ">{{ item.type }}</td>
                <td>
                  <input type="checkbox" :checked="item2.select" @click="handlechangeSel(index, index2)"
                  />
                </td>
                <td>{{ item2.name }}</td>
                <td>{{ item2.price }}</td>
                <td>
                  <button @click="handleReduce(index, index2)" :disabled="item2.count === 1">-</button>
                  {{ item2.count }}
                  <button @click="handleAdd(index, index2)">+</button>
                </td>
                <td>
                  <button @click="handleRemove(index, index2)">移除</button>
                </td>
              </tr>
            </template>
          </template>
        </tbody>
      </table>
      <div>总共购买: {{ totalMound }} 件商品，总价: ￥ {{ totalPrice }}</div>
    </template>
    <div v-else>购物车为空</div>
    <hr>
    <div>
      Debug Info
      <ul>
        <li v-for="(item, index) in list" :key="index">
          <span v-for="(value, key, index) in item">{{index}} - {{key}} :
            <template v-if=" key === 'data' ">
              <template v-for="(item, index) in value" :key="index">
                {{item}}
                <br>
              </template>
            </template>
            <template v-else>
              {{value}}
            </template>
            <br>
          </span>
        </li>
      </ul>
    </div>
  </div>
  <script src="https://unpkg.com/vue/dist/vue.min.js"></script>
  <script src="index.js"></script>
</body>

</html>